import './FileManagement.scss'
import FileManager, { Permissions } from 'devextreme-react/file-manager'
import { useRequest } from 'alova/client'


import { Http } from '../Utils/Api'
import { useMount } from 'ahooks';
import { useState } from 'react';

const fileItems = [
    {
        name: 'Documents',
        isDirectory: true,
        items: [
            {
                name: 'Projects',
                isDirectory: true,
                items: [
                    { name: 'About.rtf', isDirectory: false, size: 1024 },
                    { name: 'Passwords.rtf', isDirectory: false, size: 2048 },
                ],
            },
            { name: 'About.xml', isDirectory: false, size: 1024 },
            { name: 'Managers.rtf', isDirectory: false, size: 2048 },
            { name: 'ToDo.txt', isDirectory: false, size: 3072 },
        ],
    },
    {
        name: 'Images',
        isDirectory: true,
        items: [
            { name: 'logo.png', isDirectory: false, size: 20480 },
            { name: 'banner.gif', isDirectory: false, size: 10240 },
        ],
    },
    {
        name: 'System',
        isDirectory: true,
        items: [
            { name: 'Employees.txt', isDirectory: false, size: 3072 },
            { name: 'PasswordList.txt', isDirectory: false, size: 5120 },
        ],
    },
    { name: 'Description.rtf', isDirectory: false, size: 1024 },
    { name: 'Description.txt', isDirectory: false, size: 2048 },
];

const FileManagement = () => {
    const [fileItems, setFileItems] = useState()

    const { send } = useRequest(e => Http(e), { immediate: false })

    useMount(() => {
        send({ url: 'getJSONList' }).then(res => {
            const { data } = res
            const arr = data.map(item => ({ name: item.fileName, isDirectory: item.fileType === '文件夹' }))
            setFileItems([...arr])
        })
    })

    const getItems = (e) => {
        send({ url: 'getJSONList', params: { filePath: e } }).then(res => {
            const { data } = res
            const arr = data.map(item => ({ name: item.fileName, isDirectory: item.fileType === '文件夹' }))
            if (e) {
                fileItems.find(v => v.name === e).items = arr
                setFileItems([...fileItems])
            }
            else setFileItems([...arr])
        })
    }

    return (
        <div className='FileManagement'>
            {fileItems &&
                <FileManager
                    fileSystemProvider={fileItems}
                    onCurrentDirectoryChanged={e => getItems(e.directory.path)}
                    onFileUploaded={e => console.log('[onFileUploaded -- 成功上传文件时执行的函数]', e)}
                    onFileUploading={e => console.log('[onFileUploading -- 在上传文件之前执行的函数]', e)}
                // onContextMenuItemClick={e => console.log('[onContextMenuItemClick -- 单击上下文菜单项时执行的函数]', e)}
                // onContextMenuShowing={e => console.log('[onContextMenuShowing -- 在显示上下文菜单之前执行的函数]', e)}
                // onSelectedFileOpened={e => console.log('[onSelectedFileOpened -- 打开所选文件时执行的函数。]', e)}
                // onInitialized={e => console.log('[onInitialized -- 初始化UI]', e)}
                // onToolbarItemClick={e => console.log('[onToolbarItemClick -- 头部操作栏]', e)}
                // onOptionChanged={e => console.log('[onOptionChanged -- 更改ui属性]', e)}
                // onContentReady={e => console.log('[onContentReady -- 重新渲染]', e)}
                // onSelectionChanged={e => console.log('[onSelectionChanged -- 选择或取消选择]', e)}
                // onDirectoryCreated={e => console.log('[onDirectoryCreated -- 在创建目录时执行的函数。]', e)}
                // onDirectoryCreating={e => console.log('[onDirectoryCreating -- 在创建目录之前执行的函数。]', e)}
                // onDisposing={e => console.log('[onDisposing -- 在释放 UI 组件之前执行的函数。]', e)}
                // onErrorOccurred={e => console.log('[onErrorOccurred -- 发生错误时执行的函数。]', e)}
                // onFocusedItemChanged={e => console.log('[onFocusedItemChanged -- 更改焦点项时执行的函数。]', e)}
                // onItemCopied={e => console.log('[onItemCopied -- 在复制文件或目录时执行的函数。]', e)}
                // onItemCopying={e => console.log('[onItemCopying -- 在复制文件或目录之前执行的函数。]', e)}
                // onItemDeleted={e => console.log('[onItemDeleted -- 删除文件或目录时执行的函数。]', e)}
                // onItemDeleting={e => console.log('[onItemDeleting -- 在删除文件或目录之前执行的函数。]', e)}
                // onItemDownloading={e => console.log('[onItemDownloading -- 在下载文件之前执行的函数。]', e)}
                // onItemMoved={e => console.log('[onItemMoved -- 在移动文件或目录时执行的函数。]', e)}
                // onItemMoving={e => console.log('[onItemMoving -- 在移动文件或目录之前执行的函数。]', e)}
                // onItemRenamed={e => console.log('[onItemRenamed -- 重命名文件或目录时执行的函数。]', e)}
                // onItemRenaming={e => console.log('[onItemRenaming -- 在重命名文件或目录之前执行的函数。]', e)}
                >
                    <Permissions
                        create={true}
                        copy={true}
                        move={true}
                        delete={true}
                        rename={true}
                        upload={true}
                        download={true}>
                    </Permissions>
                </FileManager>
            }
        </div>
    );
};

export default FileManagement;